<template>
    <div>
        <h1>完成</h1>
        <h2>已经完成</h2>
        <table border="1">
            <tr>
                <select>
                    <option value="">请选择</option>
                    <option v-bind:value="i.id" v-for="i in citys":key="i.id">{{ i.name }}</option>
                </select>
            </tr>
            <tr>
                <td>ID</td>
                <td>酒店名称1</td>
                <td>酒店电话</td>
                <td>酒店图片</td>
                <td>酒店地址</td>
                <td>酒店特色</td>
                <td>创建时间</td>
                <td>操作</td>
            </tr>
            <tr v-for="i in data":key="i.Id">
                <td>{{ i.Id }}</td>
                <td>{{ i.ShopName }}</td>
                <td>{{ i.Phone }}</td>
                <td>
                    <img :src="i.Photo" width="100" height="100"></td>
                <td>{{ i.Address }}</td>
                <td>{{ i.TeSeName }}</td>
                <td>{{ i.CreateTime.substring(0,10) }}</td>
                <td>
                    <input type="button" value="修改">
                </td>
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive} from 'vue'
    let citys=ref([
        {id:1,name:"北京"},
        {id:2,name:"天津"},
        {id:3,name:"上海"},
        {id:4,name:"河北"},
        {id:5,name:"山西"},
        {id:6,name:"山东"},
    ])
    let data= ref([
    {
      "Id": 1,
      "ShopName": "北京如家酒店",
      "Phone": "18888888888",
      "Photo": "https://img1.baidu.com/it/u=3776951402,188974010&fm=253&fmt=auto?w=1026&h=665",
      "Address": "北京昌平202",
      "TeSeName": "豪华婚宴",
     "CreateTime": "2022-09-20T11:32:09.244927",
    },
    {
      "Id": 2,
      "ShopName": "北京汉庭酒店",
      "Phone": "18899988888",
      "Photo": "https://img0.baidu.com/it/u=385906721,3322194213&fm=253&fmt=auto&app=120&f=JPEG?w=570&h=380",

      "Address": "北京昌平201",
      "TeSeName": "豪华婚宴",
        "CreateTime": "2024-01-20T11:32:09.244927",
    },
    {
      "Id": 3,
      "ShopName": "北京花儿顿酒店",
      "Phone": "188777888866",
      "Photo": "https://img2.baidu.com/it/u=2116884723,4094686271&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400",
      "Address": "北京昌平208",
      "TeSeName": "豪华婚宴",
        "CreateTime": "2021-12-20T11:32:09.244927",

    },
    ])


</script>

<style scoped>

</style>